<template>

  <Header class="headerbox" :navShow="true"/>
  <div class="login_wrapper">
<div class="contidnex">
  
</div>
<div class="login_content">
 <div class="login_left">
  <img src="@/assets/logo-h@2x.png" alt="" class="logo_img">
   <p class="text1">Just one step <br>
    Start your smart investing</p>
    <p class="text2">
      The stock market is <br>
      The best way to invest your money
    </p>
</div>
 <div class="login_right">
  <div class="right_content">
  <p class="page_titlte">Login</p>
 <div class="input_content">
  <div class="login_input">
     <i class="iconfont icon-wodedangxuan"></i>
     <input type="text" placeholder="Account" class="input_text" v-model="userInfo.username">
  </div>
  <div class="login_input">
     <i class="iconfont icon-mima"></i>
     <div class="input_right">
      <input :type="showPassword ? 'password' :'text'" placeholder="Password" class="input_text" v-model="userInfo.password">
      <i class="iconfont " @click="handleOpenOrClose" :class="showPassword ? 'icon-icon-eye-close':'icon-zhengyan'"></i>
     </div>
  </div>
 </div>
  <div class="login_text">
<text>No account?</text>
<text class="text1" @click="toRegister">Register now</text>
  </div>
  <el-button class="login_btn" @click="handleLogin" :loading="loading">Login</el-button>
  </div>
 </div>
</div>
 </div>

</template>

<script setup>
import { useI18n } from "vue-i18n"; // 从 vue-i18n 导入 useI18n
import { ref, onMounted, onUnmounted } from "vue";
import Header from "../../components/Header.vue"; // 引入 Header 组件
import {login} from "../../api/login.js"
import { debounce } from "lodash"
import { useRouter } from 'vue-router';
// 使用 Composition API 获取 i18n 实例
const { t, locale } = useI18n();
const router = useRouter();
const loading = ref(false)
const showPassword = ref(true)
const userInfo= ref({
  username:"lx013",
  password:"147852369"
})


onMounted(() => {});
const handleOpenOrClose=()=>{
  showPassword.value = !showPassword.value
}
const toRegister=()=>{
  router.push('/register')
}
const handleLogin = debounce(async()=>{
  const userPeg = /^.{3,25}$/;
		const pasReg = /^.{8,25}$/;
    loading.value = true
		if(!userInfo.value.username){
          ElMessage.success({
      message: "請輸入帳號!",
      type: "warning",
      plain: true,
    });
          loading.value = false
					return false
		 }else if(!userPeg.test(userInfo.value.username)){
      ElMessage.success({
      message: "請輸入 3-25 個字元!",
      type: "warning",
      plain: true,
    });
      loading.value = false
			 return false
		 }
		if(!userInfo.value.password){
          ElMessage.success({
      message: "請輸入密碼!",
      type: "warning",
      plain: true,
    });
          loading.value = false
					return false
		}else if(!pasReg.test(userInfo.value.password)){
      ElMessage.success({
      message: "請輸入 8-25 個字元!",
      type: "warning",
      plain: true,
    });
      loading.value = false
			return false
		}
		const data={...userInfo.value}
		// uni.showLoading({
		// 	          mask: true
		// 	        });
					const res = await login(data)
          console.log("数据====",res)
		if(res.code == 200){
      ElMessage.success({
    message: res.message,
    type: 'success',
    plain: true,
  })
        loading.value = false
		   setTimeout(()=>{
        router.replace("/");
      localStorage.setItem("token", res.data.Authorization);
      localStorage.setItem("userInfo", res.data.UserInfo);
				},1000)
		}else{
      loading.value = false
    }
},500)
// 组件卸载时移除滚动监听
onUnmounted(() => {
  // window.removeEventListener("scroll", handleScroll);
});
</script>
<style scoped lang="less">
.login_wrapper{
  width:100%;
  height: calc(100vh - 60px);
  display:flex;
  align-items:center;
  justify-content: center;

  .contidnex {
  background-color: #18191e;
  min-width:1200px;
  position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    background-image: url('@/assets/login-bg.png');
    background-size: 100%;
}
.login_content{
   position: relative;
    z-index: 9;
    width: 1160px;
    height: 640px;
    background-image: url('@/assets/login-form.png');
    background-size: cover;
    display:flex;
    align-items:center;
    justify-content: center;
    .login_left{
      text-align:center;
      width:530px;
      height:100%;
      display:flex;
      align-items:center;
      flex-direction: column;
      justify-content: center;
      .logo_img{
         width:150px;
         height:150px;
         border-radius:10px;
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
         margin: 0 auto;
      }
      .text1{
         padding:50px 0;
         font-size:30px;
         color:#fff;
      }
      .text2{
        color: hsla(0, 0%, 100%, .7);
        font-size:24px;
      }
    }
    .login_right{
      flex:1;
      display:flex;
      align-items:center;
      justify-content: center;
      .right_content{
        min-width:450px;
        color:#fff;
        .page_titlte{
           line-height:33px;
           font-weight:700;
           font-size:24px;
           margin:4px 0;
        }
        .input_content{
          width:100%;
          margin-top:15px;
          .login_input{
           height:50px;
           width:100%;
           padding:0 15px;
           margin-top:25px;
           border-radius:5px;
           border:1px solid #3c3e47;
           font-size:16px;
           display:flex;
           align-items:center;
           cursor: pointer;
           .icon-mima{
            font-size:18px;
          }
          .input_text{
            padding:0 15px;
            height:100%;
            flex:1;
            width:90%;
            font-size:16px;
            color:#fff;
          }
          .input_right{
            width:100%;
            height:100%;
            display:flex;
            align-items:center;
            .input_text{
            padding:0 15px;
            height:100%;
            flex:1;
            width:100%;
            font-size:16px;
            color:#fff;
          }
          }
        }
        }
        .login_text{
          width:100%;
          display:flex;
          align-items:center;
          margin:30px 0;
           text{
font-size:14px;
cursor: pointer;
           }
           .text1{
cursor: pointer;
color: #589cf8 ;
margin-left:2px;

           }
        }
        .login_btn{
          width:100%;
          margin-top:10px;
          background-color: #589cf8;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    padding: 2px 0;
    border: none;
    height:45px;
    cursor: pointer;
        }
      }
    }

}
}

</style>
